<template>
	<view>
		<uni-nav-bar left-icon="left" :statusBar="true"   titleSize="30px" leftText="返回"     title="选择人员"  @clickLeft="back"   :fixed="true" backgroundColor="#3286ed" color="#fff"/>
		<u-search  style="position:fixed;z-index:20;width:100%;height;40px;background-color: #fff;padding: 10px;" @clear="clearFn" :clearabled="true"
		 showAction @custom="customFn" v-model.enter="formData.userName" @search="inputSearchBtn"  height='30' placeholder="请输入" shape="square" actionText='搜索' @change="changeFn"></u-search>
		<view style="height:50px;width: 100%;display: block;"></view>
		<view>
			<view class="userBox" @click="checkBtn(item)" v-for="(item,index) in list" :key="index">
				<view>用户名称:{{item.userName}}</view>
				<view>用户昵称:{{item.nickName}}</view>
				<view>部门:{{item.dept.deptName}}</view>
				<view>手机号码:{{item.phonenumber}}</view>
				<view class="checked">选择</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {deptTreeSelect,listUser,listUser2} from '@/api/system/user.js'
	export default {
		data(){
			return{
				deptOptions:[],
				formData:{
					pageNum:1,
					pageSzie:10,
					deptId:100,
					userName:'',
				},
				list:[],
				total:0
			}
		},
		onLoad(options){
			console.log(options);
			this.getDeptTree()
			this.getList()
		},
		// 上划
		onReachBottom() {
			if(this.formData.pageSzie*this.formData.pageNum<this.total){
				console.log(this.total);
						 this.formData.pageNum++
						 let res=listUser2(this.formData).then(reponse=>{
						 			 this.list.push(...reponse.rows)
									  console.log(this.list);
						 })
						
						 
			}else{
				console.log(this.total);
						 console.log('已经加载完毕');
			}
		},
		methods:{
			//当输入框值发生改变时重新输入
			changeFn(){
				this.getList()
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getDeptTree() {
			      deptTreeSelect().then(response => {
					  console.log(response.data);
			        this.deptOptions = response.data;
			      });
			    },
			async getList(){
			const res= await listUser2(this.formData)
			console.log(res);
			this.list=res.rows
			this.total=res.total
			},
		   customFn(){
			   this.list=[]
			   this.getList()
		   },
		   inputSearchBtn(){
			   this.list=[]
			   this.getList()
		   },
		   clearFn(){
			   this.formData.userName=''
			   this.getList()
		   },
		   // 选中
		   checkBtn(item){
			   console.log(item);
			   uni.$emit('updateData', item)
				uni.navigateBack({
					delta: 1
				})
			   
		   },
		   // 上划加载
			
		}
	}
</script>

<style lang="scss">
	.userBox{
		position: relative;
		width: 95%;
		min-height:80px;
		margin: 10px;
		padding: 10px;
		font-size: 12px;
		border: solid 1px #c3c3c3;
		background-color: #fff;
		.checked{
			position: absolute;
			right: 15px;
			bottom: 15px;
			color:'#fd9540',
		}
	}
</style>